import React, { useEffect, useState } from 'react';
import { Table, Tag, Button, Switch, notification, message, Select, Input, Form } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import service from '../../../api';
import _, { set, values } from 'lodash';
import "./index.scss"



function Pro(props: any) {
    const [proList, setProList] = useState([]);
    const[category,setCategory]=useState([]);
    const[options,setOptions]=useState([]);


    interface DataType {
        key: any;
        img1: string;
        proname: string;
        brand: string;
        category: string;
        isrecommend: number;
        issale: number;
        isseckill: number;
        originprice: number;
        discount: number;
        sales: number;
        proid: string;
    }
    //获取商品列表
    var getProlist = async () => {
        var res = await service.pro.proList();
        setProList(res.data.data);
    }
    useEffect(() => {
        getProlist();
    }, [])
    //搜索
    var onFinish = async (values: any) => {
        console.log('Success:', values);
        var res = await service.pro.proSearch(values);
        setProList(res.data.data);
        console.log(res);
        //如果请求回来的数据为空，提示用户
        if (res.data.data.length === 0) {
            message.destroy();
            message.error('没有找到相关商品，请重新搜索');
        }

    }
    //获取分类
    var getproCategory = async () => {
        var res = await service.pro.getCategory();
        console.log(res.data.data);
        setCategory(res.data.data);
    }
    useEffect(() => {
        getproCategory();
    }, [])
    //分类
    var optinos: any = [];
    category.map((item: any) => {
        optinos.push({ label: item, value: item })
    })

    console.log(optinos);
    //切换状态
    const change = async (checked: any, proid: any, type: any) => {
        const res = await service.pro.proUpdateFlage({ flag: checked, proid, type });
        console.log(res);
        if (res.data.code === '200') {
            //查找当前修改的商
            var item: any = proList.find((item: any) => item.proid === proid);
            message.destroy();
            if (item) {
                item[type] = checked ? 1 : 0;
            }
            message.success('修改成功');
            var newProList = _.cloneDeep(proList);
            setProList(newProList);
        }
    }

    //表格
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            key: 'index',
            dataIndex: 'index',
            render: (_, text, index) => <div>{index + 1}</div>,
        },
        {
            title: '图片',
            key: 'pic',
            dataIndex: 'pic',
            render: (_, record, index) => <img src={record.img1} alt="" />,
        },
        {
            title: '名称',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <div>{record.proname}</div>,
        }, {
            title: '品牌',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <div>{record.brand}</div>,
        }, {
            title: '分类',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <div>{record.category}</div>,
        }, {
            title: '票价',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <div>{record.originprice}</div>,
        }, {
            title: '折扣',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <div>{record.discount}</div>,
        }, {
            title: '销量',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <div>{record.sales}</div>,
        },
        {
            title: '是否售卖',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <Switch checked={record.issale == 1} onChange={(checked) => change(checked, record.proid, 'issale')} />,
        },
        {
            title: '是否秒杀',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <Switch checked={record.isseckill == 1} onChange={(checked) => change(checked, record.proid, 'isseckill')} />,
        },
        {
            title: '是否推荐',
            key: 'role',
            dataIndex: 'link',
            render: (_, record, index) =>
                <Switch checked={record.isrecommend == 1} onChange={(checked) => change(checked, record.proid, 'isrecommend')} />,
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record, index) => (
                <div className='twoButtn'>

                    <Button type='primary' size='small' danger={true}>删除</Button>
                </div>
            ),
        },
    ];


    return (
        <div className='seachbiao'>
            <Form
                name="Seachbasic"

                wrapperCol={{ span: 16 }}
                style={{ display: 'flex', justifyContent: 'flex-start' }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                autoComplete="off"
            >

                <Form.Item
                    name="category"
                    rules={[{ required: true, message: '请选择类型!' }]}

                >

                    <Select
                        style={{ width: 120 }}
                        options={optinos}
                    />
                </Form.Item>
                <Form.Item
                    style={{ width: 200 }}
                    wrapperCol={{ offset: 3, span: 16 }}
                    // rules={[{ required: true, message: '请输入商品名称！' }]}
                    name="search"
                >
                    <Input />
                </Form.Item>

                <Form.Item >
                    <Button type="primary" htmlType="submit">
                       查看
                    </Button>
                </Form.Item>
            </Form>
            <Table className='seachbg' columns={columns} dataSource={proList} />
        </div>
    );
}

export default Pro;